<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">

		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>03CSS고급선택자</title>
		<style type="text/css">
			#first,#fourth{font-style:italic;font-size:24px;color:orange;}
			#hmenu li{color:blue;}
			#fmenu li{color:navy;}
			/*후손선택자*/
			#hmenu2>li{color:orange;}
			#fmenu2>li{color:red;}
			#headers>h1{color:green;}
			/*자식선택자*/
			div + p{color: pink;}
			p + p{color: yellow;}
			
			#first1{color: red;}
			ul #first3{color: orange;}
			.active2{color:#000080;}
		</style>
	</head>

	<body>
		<h1>CSS고급선택자</h1>
		<h2>그룹group 선택자</h2>
		<p>하나 이상의 요소에 특정 스타일 적용</p>
		<p>각 요소들은,로 구분</p>
		<div id="first">첫번째</div>
		<div id="second">두번째</div>
		<div id="third">세번째</div>
		<div id="fourth">네번째</div>
		
		<hr/>
		<h2>하위 선택자</h2>
		<p>부모 선택자를 기준으로 모든 하위 선택자를 선택해서 스타일 적용</p>
		<p>HTML 문서의 계층구조를 이용</p>
		
		<ul id="hmenu">
			<li><ol>
				<li>Home</li>
				<li>About</li>
			</ol></li>
			<li>메일</li>
			<li>더보기</li>
		</ul>
		<ul id="fmenu">
			<li>회사소개</li>
			<li>제휴제안</li>
			<li>이용약관</li>
		</ul>
		<hr/>
		
		<h2>자식 child 선택자</h2>
		<p>부모 선택자를 기준으로 모든 자식 요소를 대상으로 스타일 적용</p>
		<p>HTML 문서의 계층구조를 이용</p>
	
		<ul id="hmenu2">
			<li>ㅇ<ol>
				<li>Home</li>
				<li>About</li>
			</ol></li>
			<li>메일</li>
			<li>더보기</li>
		</ul>
		
		<ul id="fmenu2">
			<li>회사소개</li>
			<li>제휴제안</li>
			<li>이용약관</li>
		</ul>
		
		<div id="headers">
			<h1>제목</h1>
		<div id="sub"><h1>제목</h1></div>
		</div>
		<hr/>
		
		<h2>인접Adjacent선택자</h2>
		<p>동일계층안에서 한 요소를 기준으로 바로 뒤 요소를 선택해서 스타일 적용</p>
		<p>HTML문서의 계층구조를 이용</p>
		<div>
			<p>첫번째줄</p>
			<p>두번째줄</p>
			<div>블럭요소</div>
			<p>세번째줄</p>
		</div>
		
		<h1>ㅊ</h1>
		<ul >
			<li id="first1" class="active">4</li>
			<li id="first2" class="active2">3</li>
			<li id="first3" class="active3">5</li>
			<li>2</li>
			<li>1</li>
		</ul>
		
		
	</body>
</html>
